 <!-- 添加文章页面 -->
<template>
  <div>
    <a-card>
      <h4 style="margin-left: 10px;color: #d6a20f;text-align: center;">{{id? '编辑文章':'写文章'}}</h4>
      <a-form-model :model="artInfo" ref="artInfoRef" :rules="artInfoRules" :hideRequiredMark="true" :label-col="labelCol" :wrapper-col="wrapperCol">
        <!-- 标题 -->
        <a-form-model-item label="标题" prop="title" >
          <a-input v-model="artInfo.title"></a-input>
        </a-form-model-item>
        <!-- 分类 -->
        <a-form-model-item label="分类" prop="cid" >
          <a-select v-model="artInfo.cid" @change="cateChange" >
            <a-select-option v-for="cate in cateList" :key="cate.ID" :value="cate.ID">
              {{cate.name}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="标签" prop="tids">
          <a-select v-model="artInfo.tids" mode="multiple"  @change="tagChange" placeholder="请选择标签">
            <a-select-option v-for="tag in tagList" :key="tag.ID" :value="tag.ID">
              {{tag.name}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 描述 -->
        <a-form-model-item label="摘要" prop="desc">
          <a-textarea v-model="artInfo.desc"></a-textarea>
        </a-form-model-item>
        <!-- 文章内容 -->
        <a-form-model-item label="正文" prop="content">
          <div style="height: 600px;">
            <!-- Markdown编辑器 -->
            <mavon-editor v-model="artInfo.content" :toolbars="toolbars" :codeStyle="codeStyle"
                          ref=artContentMd  @imgAdd="handleImgAdd" @imgDel="handleImgDel"
                          placeholder="编辑文章内容..." style="height:100%;z-index: 999;font-size: 16px;" />
          </div>
        </a-form-model-item>
        <!-- 提交 -->
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" style="margin: 0 10px 0 0 ;" @click="artSubmit(artInfo.id)">
            发布
          </a-button>
          <a-button type="primary" style="margin: 0 10px 0 0 ;" @click="artDraft(artInfo.id)">
            存为草稿
          </a-button>
          <a-button type="danger" style="margin: 0 10px;" @click="addCancel()">
            重置
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
export default {
  props: ['id'],
  data () {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      artInfo: {
        id: 0,
        title: '',
        cid: '',
        tids: [],
        desc: '',
        content: '',
        status: 0
      },
      cateList: [],
      tagList: [],
      // 表单验证
      artInfoRules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        cid: [
          { required: true, message: '请选择文章分类', trigger: 'change' }
        ],
        tids: [
          { required: true, message: '请至少选择一个文章标签', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请选择文章描述', trigger: 'blur' },
          { max: 120, message: '文章描述最多20个字符', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },

      // Markdown工具栏配置
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true, // 导航目录
        alignleft: false, // 左对齐
        aligncenter: false, // 居中
        alignright: false, // 右对齐
        preview: false // 预览
      },
      // markdown编辑器代码样式 monokai-sublime
      codeStyle: 'atom-one-light' // 主题

    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getCateList()
    this.getTagList()
    if (this.id) {
      this.getArtInfo(this.id)
    }
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  // 方法集
  methods: {
    // 查询文章信息
    async getArtInfo (id) {
      const { data: res } = await this.$axios.get(`/admin/article/${id}`)
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.artInfo = res.data
      this.artInfo.id = res.data.ID
      const tids = res.data.tids.split(',')
      const tags = []
      for (let i = 0; i < tids.length; i++) {
        tags.push(parseInt(tids[i]))
      }
      this.artInfo.tids = tags
    },

    // 获取分类列表
    async getCateList () {
      const { data: res } = await this.$axios.get('/admin/categories')
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.cateList = res.data
    },
    async getTagList () {
      const { data: res } = await this.$axios.get('/admin/tags')
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.tagList = res.data
    },

    // 分类选择
    cateChange (val) {
      this.artInfo.cid = val
    },

    tagChange (val) {
      this.artInfo.tag = val
    },

    artDraft (id) {
      this.artInfo.status = 1
      this.artSubmit(id)
    },

    // 提交(更新)文章
    artSubmit (id) {
      this.$refs.artInfoRef.validate(async (valid) => {
        if (!valid) {
          return false
        }

        // 处理标签
        const val = this.artInfo.tids
        this.artInfo.tids = ''
        for (let i = 0; i < val.length; i++) {
          if (i === 0) {
            this.artInfo.tids += val[i]
          } else {
            this.artInfo.tids += ',' + val[i]
          }
        }

        // 处理状态
        this.artInfo.status = 0

        if (id === 0) { // 添加文章
          const { data: res } = await this.$axios.post('/admin/article', this.artInfo)
          if (res.status !== 200) {
            return this.$message.error(res.message)
          }
          this.$router.push('/admin/articlelist')
          this.$message.success('操作成功')
        } else { // 更新文章
          const { data: res } = await this.$axios.put(`/admin/article/${id}`, this.artInfo)
          if (res.status !== 200) {
            return this.$message.error(res.message)
          }
          this.$router.push('/admin/articlelist')
          this.$message.success('操作成功')
        }
      })
    },

    // 取消
    addCancel () {
      this.$refs.artInfoRef.resetFields()
    },

    handleImgAdd (pos, $file) {
      // 第一步.将图片上传到服务器
      const formdata = new FormData()
      formdata.append('image', $file)
      this.$axios.post('/admin/upload', formdata, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        // console.log("res:" , res);
        const url = res.data.url
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        this.$refs.artContentMd.$img2Url(pos, url)
      })
    },
    // 处理Markdown编辑器图片删除
    handleImgDel () {
      console.log('处理图片删除')
    }
  }
}
</script>
<style>

</style>
